Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Dashboards improvements #1324

Merged
merged 27 commits into from
Feb 2, 2024
Merged

Conversation

bprusinowski
Copy link
Collaborator

@bprusinowski bprusinowski commented Jan 31, 2024

This PR introduces optimizations and fixes related to dashboards:

  • bigger charts in published mode,
  • responsive tall layout (switching to one column on mobile devices and aligning chart elements along columns in a row),
  • filters moved below the chart,
  • fixed table previews and interactive filters in preview mode.

🟰 Alignment of chart elements across columns

Generally, charts that are next to each other in a Tall layout should:

  • respect maximum common height of the "header" (title + description + interactive filters button) so that the chart SVGs are aligned,
  • respect maximum common chart SVG height, so that the chart footnotes are aligned.

For visual reference see Figma design.

How to test

  1. Go to this link.
  2. Add two more charts, so there are three in total.
  3. Try to add long titles to two charts.
  4. Enable an interactive filter in one chart.
  5. Proceed to layout options.
  6. Change layout to Dashboard -> Tall.
  7. Switch to table preview for every of the chart and see that it works correctly (while on TEST the table layout is applied for every chart and breaks their sizes).
  8. Go back to chart modes.
  9. See that the interactive filter works.
  10. See that the chart elements are aligned (for two charts next to each other).
  11. Resize the window to see that the charts stack on top of each other when window width is small.

Copy link

vercel bot commented Jan 31, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
visualization-tool ✅ Ready (Inspect) Visit Preview 💬 1 unresolved Feb 2, 2024 2:31pm

@bprusinowski bprusinowski merged commit b4ae184 into main Feb 2, 2024
4 of 6 checks passed
@bprusinowski bprusinowski deleted the feat/improve-responsiveness branch February 2, 2024 13:34
@KerstinFaye
Copy link

KerstinFaye commented Feb 2, 2024

Looks really great!! The alignment works so much better now. Also all the other features (table view, drag & drop, responsive title, responsive behaviour of the charts).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants